<template>
  <div class="app-container" v-loading="listLoading">
    <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-button type="info" icon="el-icon-message" class="title" circle></el-button>
        <span style="margin-left: 10px;">{{title}}</span>
        <el-button  style="margin-left: 10%;" @click="openEdit(activeName)" v-if="disabled_all==true&&activeName!='4'&&activeName!='5'">编辑</el-button>
        <el-button type="primary" style="margin-left: 10%;" @click="save(activeName)" v-else-if="disabled_all==false&&ctiveName!='4'">保存</el-button>
        <el-button type="primary" style="margin-left: 10%;" @click="addAccountOpen({})" v-if="activeName=='4'">新增</el-button>
      <!-- 基本信息 -->
      <el-tab-pane label="基本信息" name="1">
        <el-form :model="info_1" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" :disabled="disabled_1">
          <el-row>
            <el-col :span="6">
              <el-form-item label="商户名称" prop="merchant_name">
                <el-input v-model="info_1.merchant_name" ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="信用代码" prop="merchant_code">
                <el-input v-model="info_1.merchant_code" ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="机构类别" prop="merchant_type">
                <el-input v-model="info_1.merchant_type" ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="执照类型" prop="business_license_type">
                <el-input v-model="info_1.business_license_type" ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="注册地址" prop="merchant_address">
                <el-input v-model="info_1.merchant_address" ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="注册资本" prop="registered_capital">
                <el-input v-model="info_1.registered_capital" ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="营业期限" prop="business_term_start">
                <el-input v-model="info_1.business_term_start" ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="经营状态" prop="business_status">
                <!-- <el-input v-model="info_1.business_status" ></el-input> -->
                <el-select v-model="info_1.business_status" placeholder="请选择经营状态" >
                  <el-option v-for="(item,index) in business_status" :label="item.value" :value="item.id" :key="index" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="股东数量" prop="merchant_shareholder_count">
                <div class="bixxx" @click="shareholderShow"><span>{{ info_1.merchant_shareholder_count }}</span></div>
                
              </el-form-item>
            </el-col>
            <el-col :span="18">
              <el-form-item label="经营范围" prop="nature_business">
                <el-input v-model="info_1.nature_business" type="textarea" ></el-input>
              </el-form-item>
            </el-col>
            
            <el-col :span="6">
              <el-form-item label="法人姓名" prop="shareholder">
                <el-input v-model="info_1.law_person_name" ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="法人身份证" prop="shareholder">
                <el-input v-model="info_1.law_person_idcard" ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="证件有效期" prop="shareholder">
                <el-col :span="9">
                  <el-date-picker type="date" placeholder="开始日期" v-model="info_1.law_person_idcard_start" style="width: 100%;"></el-date-picker>
                </el-col>
                <el-col :span="9">
                  <el-date-picker  placeholder="结束日期" v-model="info_1.law_person_idcard_end" style="width: 100%;"></el-date-picker>
                </el-col>
                <el-col :span="6">
                  <el-switch v-model="info_1.law_person_idcard_longtime"></el-switch>长期
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="法人电话" prop="shareholder">
                <el-input v-model="info_1.law_person_mobile" ></el-input>
              </el-form-item>
            </el-col>
   
            <el-col :span="6">
              <el-form-item label="医疗登记名" prop="shareholder">
                <el-input v-model="info_1.medical_license_name" ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="医疗登记号" prop="shareholder">
                <el-input v-model="info_1.medical_license_code" ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="登记地址" prop="shareholder">
                <el-input v-model="info_1.medical_license_address" ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="发证机关" prop="shareholder">
                <el-input v-model="info_1.issuing_authority" ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="机构类型" prop="shareholder">
                <!-- <el-input v-model="info_1.business_status" ></el-input> -->
                <el-select v-model="info_1.institution_type" placeholder="请选择机构类型" >
                  <el-option v-for="(item,index) in institution_type" :label="item.value" :value="item.id" :key="index" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="证件有效期" prop="shareholder">
                <el-col :span="9">
                  <el-date-picker type="date" placeholder="开始日期" v-model="info_1.medical_license_start" style="width: 100%;"></el-date-picker>
                </el-col>
                <el-col :span="9">
                  <el-date-picker  placeholder="结束日期" v-model="info_1.medical_license_end" style="width: 100%;"></el-date-picker>
                </el-col>
                <el-col :span="6">
                  <el-switch v-model="info_1.medical_license_longtime"></el-switch>长期
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="有效期" >
                <div class="bixxx" v-if="info_1.medical_license_longtime"><span>长期</span></div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="经营性质" prop="shareholder">
                <el-input v-model="info_1.business_nature" ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="诊疗等级" prop="shareholder">
                <!-- <el-input v-model="info_1.treatment_level" ></el-input> -->
                <el-select v-model="info_1.treatment_level" placeholder="请选择诊疗等级" >
                  <el-option v-for="(item,index) in treatment_level" :label="item.value" :value="item.id" :key="index" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="诊疗项目" prop="shareholder">
                <el-input v-model="info_1.treatment_project" ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="主要负责人" prop="responsible_person">
                <el-select v-model="info_1.responsible_person" placeholder="请选择主要负责人" >
                  <el-option v-for="(item,index) in contactor_list" :label="item.name" :value="item.id" :key="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="合同联系人" prop="contactor">
                <el-select v-model="info_1.contactor" placeholder="请选择合同联系人" >
                  <el-option v-for="(item,index) in contactor_list" :label="item.name" :value="item.id" :key="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="提现联系人" prop="withdrawal_contactor">
                <el-select v-model="info_1.withdrawal_contactor" placeholder="请选择提现联系人" >
                  <el-option v-for="(item,index) in contactor_list" :label="item.name" :value="item.id" :key="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="3">
                <el-button type="primary" size="small" @click="managerContactor">人员管理</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>

      <!-- 经营信息 -->
      <el-tab-pane label="经营信息" name="2">
        <el-form :model="info_2" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" :disabled="disabled_2" >
          <el-row>
            <el-col :span="6">
              <el-form-item label="对外展示名称" >
                <el-input v-model="info_2.display_name" ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="商户分类" prop="">
                <el-select v-model="info_2.merchant_type" placeholder="请选择商户分类" style="width: 100%;">
                  <el-option v-for="(item,index) in information_merchant_type" :label="item.value" :value="item.id" :key="index" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="商户类别" prop="">
                <el-select v-model="info_2.merchant_class" placeholder="请选择商户类别" style="width: 100%;">
                  <el-option v-for="(item,index) in merchant_class" :label="item.value" :value="item.id" :key="index" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="所有制形式" prop="">
                <el-select v-model="info_2.ownership" placeholder="请选择所有制形式" style="width: 100%;">
                  <el-option v-for="(item,index) in merchant_ownership" :label="item.value" :value="item.id" :key="index" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="医疗机构背景" prop="">
                <el-select v-model="info_2.merchant_institutions" placeholder="请选择医疗机构背景" style="width: 100%;">
                  <el-option v-for="(item,index) in merchant_institutions" :label="item.value" :value="item.id" :key="index" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="客户来源" prop="" >
                <el-col :span="8">
                    <el-input v-model="info_2.zk" placeholder="直客占比%"  ></el-input>
                </el-col>
                <el-col :span="8">
                    <el-input v-model="info_2.qd"  placeholder="渠道占比%" ></el-input>
                </el-col>
                <el-col :span="8">
                    <el-input v-model="info_2.other"  placeholder="其他占比%" ></el-input>
                </el-col>
              </el-form-item>
            </el-col>
           
          
            <el-col :span="6">
              <el-form-item label="选择分期机构" prop="">
                <el-select v-model="info_2.installment_institution" placeholder="请选择选择分期机构" style="width: 100%;" multiple>
                  <el-option v-for="(item,index) in installmento_rganization_list" :label="item.name" :value="item.id" :key="index" />
                </el-select>
              </el-form-item>
            </el-col><el-col :span="6">
              <el-form-item label="分期机构数量" prop="">
                <el-input v-model="info_2.installment_institution_num" ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item label="省" prop="">
                <!-- <el-input v-model="info_2.actual_province"></el-input> -->
                <el-select v-model="info_2.actual_province" placeholder="请选择省" style="width:100%"   @change="getRegionByPid(info_2.actual_province,1)">
                  <el-option v-for="(item,index) in province" :label="item.name" :value="item.region_id" :key="index" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item label="市" prop="">
                <el-select v-model="info_2.actual_city" placeholder="请选择城市"  style="width:100%"   @change="getRegionByPid(info_2.actual_city,2)">
                  <el-option v-for="(item,index) in city" :label="item.name" :value="item.region_id" :key="index" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item label="区" prop="">
                <el-select v-model="info_2.actual_district" placeholder="请选择区县"   style="width:100%"  >
                  <el-option v-for="(item,index) in district" :label="item.name" :value="item.region_id" :key="index" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="15">
              <el-form-item label="详细地址" prop="">
                <el-input v-model="info_2.actual_operating_address" ></el-input>
              </el-form-item>
            </el-col><el-col :span="6">
              <el-form-item label="场地面积" prop="">
                <el-input v-model="info_2.site_area" ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="开业时间" prop="">
          
                <el-date-picker type="date" placeholder="选择日期" v-model="info_2.opening_date" style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="实际经营人" prop="actual_operator">
                <!-- <el-input v-model="info_2.actual_operator" ></el-input> -->
                <el-select v-model="info_2.actual_operator" placeholder="请选择实际经营人" >
                  <el-option v-for="(item,index) in contactor_list" :label="item.name" :value="item.id" :key="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="营业收入(万)" prop="">
                <el-input v-model="info_2.last_year_operating_income" placeholder="上年营业收入(万)"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="客均单价(元)" prop="">
                <el-input v-model="info_2.price" placeholder="客均单价(元)"></el-input>
              </el-form-item>
            </el-col><el-col :span="6">
              <el-form-item label="人员总数" prop="">
                <el-input v-model="info_2.personnel" placeholder="人员总数(人)"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="实际经营范围" prop="">
                <el-input v-model="info_2.actual_business_scope" placeholder="实际经营范围录入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="商户简介" prop="">
                <el-input v-model="info_2.desc" placeholder="商户简介"></el-input>
              </el-form-item>
            </el-col>
            
          </el-row>
        </el-form>
      </el-tab-pane>
      <!-- 产品信息 -->
      <el-tab-pane label="产品信息" name="3">
        <el-form :model="info_2" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" :disabled="disabled_3" >
          <el-row>
            <el-col :span="6">
              <el-form-item label="所属部门" prop="">
                <el-select v-model="info_3.dept" placeholder="请选择部门" style="width: 100%;">
                  <el-option label="成都" :value="1"  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="回购方式" prop="">
                <el-select v-model="info_3.repurchase_method" placeholder="请选择部门" style="width: 100%;">
                  <el-option label="通用回购方式21.11" :value="1"  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="回购参数" prop="">
                <el-select v-model="info_3.repurchase_parameters" placeholder="请选择部门" style="width: 100%;">
                  <el-option label="回购参数(犹豫期10天)" :value="1"  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="放款方式" prop="">
                <el-select v-model="info_3.loan_method" placeholder="请选择部门" style="width: 100%;">
                  <el-option label="放款到商户" :value="1"  />
                </el-select>
              </el-form-item>
            </el-col>
             <el-col :span="6">
              <el-form-item label="收款账户" prop="receiving_account">
                <el-select v-model="info_3.receiving_account" placeholder="收款账户" >
                  <el-option v-for="(item,index) in accouontData" :label="item.bank_name+item.bank_number" :value="item.id" :key="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="提现账户" prop="withdrawal_account">
                <el-select v-model="info_3.withdrawal_account" placeholder="收款账户" >
                  <el-option v-for="(item,index) in accouontData" :label="item.bank_name+item.bank_number" :value="item.id" :key="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
           
            <el-col :span="6">
              <el-form-item label="回购账户" prop="repurchase_acccount">
                <el-select v-model="info_3.repurchase_acccount" placeholder="收款账户" >
                  <el-option v-for="(item,index) in accouontData" :label="item.bank_name+item.bank_number" :value="item.id" :key="item.id" />
                </el-select>
              </el-form-item>
            </el-col> 
            <el-col :span="6">
              <el-form-item label="自动回购" prop="">
                <el-radio-group v-model="info_3.automatic_repurchase" >
                  <el-col :span="12">
                    <el-radio border :label="1" >是</el-radio>
                  </el-col>
                  <el-col :span="12">
                    <el-radio border :label="0">否</el-radio>
                  </el-col>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="风险收费模式" prop="">
                <el-select v-model="info_3.fee_model" placeholder="请选择风险定价收费模式" style="width: 100%;">
                  <el-option v-for="(item,index) in fee_model" :label="item.value" :value="item.id" :key="index" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="放款控制" prop="">
                <el-radio-group v-model="info_3.loan_control" size="medium">
                  <el-col :span="12">
                    <el-radio border :label="1" >实时放款</el-radio>
                  </el-col>
                  <el-col :span="12">
                    <el-radio border :label="2">手工放款</el-radio>
                  </el-col>
                  
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="风险定价档位" prop="">
                <el-radio-group v-model="info_3.gear_position" size="medium">
                  <el-col :span="8">
                    <el-radio border :label="1" >0档</el-radio>
                  </el-col>
                  <el-col :span="8">
                    <el-radio border :label="2">1档</el-radio>
                  </el-col>
                  <el-col :span="8">
                    <el-radio border :label="3">2档</el-radio>
                  </el-col>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="" prop="">
                <el-radio-group v-model="info_3.rate" size="medium">
                  <el-col :span="8">
                    <el-radio border :label="1" >全贴息(定制产品)</el-radio>
                  </el-col>
                  <el-col :span="8">
                    <el-radio border :label="2">非贴息(标准产品)</el-radio>
                  </el-col>
                  <el-col :span="8">
                    <el-radio border :label="3">部分贴息(部分定制产品)</el-radio>
                  </el-col>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="产品定价(元)" prop="">
                <el-col :span="11">
                  <el-input v-model="info_3.fixed_price_min" placeholder="价格下限"></el-input>
                </el-col>
                <el-col class="line" :span="1" style="text-align: center;">-</el-col>
                <el-col :span="11">
                  <el-input v-model="info_3.fixed_price_max"  placeholder="价格上限"></el-input>
                </el-col>
              </el-form-item>
            </el-col>
          </el-row>
          <el-table :data="rateData" border style="width: 100%;" >
            <el-table-column prop="period" label="期数" width="80" align="center"></el-table-column>
            <el-table-column prop="dc" label="档次" width="80" align="center"></el-table-column>
            <el-table-column prop="rate" label="对客总名义利率" align="center"></el-table-column>
            <el-table-column prop="month_rate" label="对客月名义利率" align="center"></el-table-column>
            <el-table-column prop="merchant_rate" label="商户贴息费率" align="center"></el-table-column>
            <el-table-column prop="server_rate" label="商户风险服务费率" align="center"></el-table-column>
            <el-table-column prop="customer_IRR" label="对客年化IRR" align="center"></el-table-column>
            <el-table-column prop="all_IRR" label="综合年化IRR" align="center"></el-table-column>
            <el-table-column prop="status" label="启用状态" width="80"> 
              <template slot-scope="{row}">
                <el-switch v-model="row.status"></el-switch>
              </template>
            </el-table-column>
          </el-table>
        </el-form>
      </el-tab-pane>
      <!-- 账户信息 -->
      <el-tab-pane label="账户信息" name="4">
        
        <el-table :data="accouontData" border style="width: 100%;margin-top: 20px;" >
            <el-table-column  label="类型"  align="center">
              <template slot-scope="{row}">
                <el-select v-model="row.account_type" placeholder="请选择账户类型" style="width: 100%;" disabled>
                  <el-option v-for="(item,index) in account_type" :label="item.value" :value="item.id" :key="index" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="account_name" label="账户名称" align="center"></el-table-column>
            <el-table-column prop="bank_name" label="银行名称" align="center"></el-table-column>
            <el-table-column prop="branch_name" label="开户行信息" align="center"></el-table-column>
            <el-table-column  label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="addAccountOpen(scope.row)">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
      </el-tab-pane>
      <!-- 附件信息 -->
      <el-tab-pane label="附件信息" name="5">
        <el-row >
          <el-col :span="6">
            <ul class="infinite-list"  >
              <li  class="infinite-list-item " v-bind:class="active_field==index?'activess':''" v-for="(item,index) in info_5.attachment" @click="chooseAtt(index,item)">
                <el-row >
                  <el-col :span="18"><div class="grid-content bg-purple">{{item.field_desc}}</div></el-col>
                  <el-col :span="6"><div class="grid-content bg-purple-light"><span style="font-size: 14px;font-weight: 600;">{{item.list.length}}</span>张</div></el-col>
                </el-row>
              </li>
            </ul>
          </el-col>
          <el-col :span="18">
            <el-form ref="att_form" :model="att_form" label-width="200px" label-position="top">
              <viewer style="display:inline">
                <el-form-item :label="att_detail.field_desc">
                  <el-upload
                    :action="UploadUrl()"
                    list-type="picture-card"
                    :headers="myHeaders"
                    :on-success="handSuccess"
                    :before-upload="beforeAvatarUpload"
                    :on-preview="handlePictureCardPreview"
                    :show-file-list="true"
                    :data="{field:active_field}"
                    :file-list="att_detail.list"
                    :on-remove="handleRemove">
                    <i class="el-icon-plus"></i>
                  </el-upload>
                  <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                  </el-dialog>
                </el-form-item>
              </viewer>
              <el-button type="primary"  @click="onSubmitAttachment">保存</el-button>
            </el-form>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
    <!-- 股东设置 -->
    <el-drawer :title="drawer.drawer" :visible.sync="drawer.drawerAble" :direction="drawer.direction" >
      <el-form ref="dataForm" :inline="true" :model="shareholder_from" label-width="80px">
        <div v-for="(item,k) in shareholder_from.datas" :key="k" style="border-bottom: 1px solid #eee;height: 50px;padding-top: 7px;">
        
          <el-form-item label="姓名">
            <el-input v-model="item.name" placeholder="姓名" style="width: 160px" />
          </el-form-item>
          <el-form-item label="占比">
            <el-input v-model="item.proportion" placeholder="百分比" style="width: 160px" />
          </el-form-item>
         
          <el-form-item>
            <el-button v-if="k==0" type="primary" size="mini" @click="addDocument()">+</el-button>
            <el-button v-else type="info" size="mini" @click="delDocument(k)">X</el-button>
          </el-form-item>
        </div>
      </el-form>
      <span class="footerbtn" >
        <el-button type="primary" @click="ShareHolderSet(2)">确 定</el-button>
      </span>
    </el-drawer>
    <!-- 人员新增 -->
    <el-drawer :title="contactor.drawer" :visible.sync="contactor.drawerAble" :direction="contactor.direction" >
      <el-form ref="dataForm"  :model="contactor_form" label-width="120px">
          <el-form-item label="姓名">
            <el-input v-model="contactor_form.name"></el-input>
          </el-form-item>
          <el-form-item label="身份证号码">
            <el-input v-model="contactor_form.idcard"></el-input>
          </el-form-item>
          <el-form-item label="身份证有效期">
            <el-col :span="6">
              <el-switch v-model="contactor_form.idcard_longtime"></el-switch>长期
            </el-col>
            <el-col :span="9">
              <el-date-picker type="date" placeholder="开始日期" v-model="contactor_form.idcard_start" style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col :span="9">
              <el-date-picker  placeholder="结束日期" v-model="contactor_form.idcard_end" style="width: 100%;"></el-date-picker>
            </el-col>
            
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="contactor_form.mobile"></el-input>
          </el-form-item>
          <el-form-item label="职务">
            <el-input v-model="contactor_form.position"></el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="contactor_form.email"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmitContactor">立即提交</el-button>
          </el-form-item>
         
      </el-form>
      
    </el-drawer>
    <!-- 人员列表 -->
    <el-drawer :title="contactorList.drawer" :visible.sync="contactorList.drawerAble" :direction="contactorList.direction" >
      <el-table :data="contactor_list" size="mini" style="width: 90%;margin-left:5%" border>
        <el-table-column prop="name" label="姓名" width="120"></el-table-column>
        <el-table-column prop="idcard" label="身份证" width="200"></el-table-column>
        <el-table-column prop="mobile" label="电话" width="100"></el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="addContactor(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button class="footerbtn" type="primary" size="small" @click="addContactor({})">新增人员</el-button>
    </el-drawer>
    <!-- 账户新增 -->
    <el-drawer :title="account.drawer" :visible.sync="account.drawerAble" :direction="account.direction" >
      <el-form ref="dataForm"  :model="contactor_form" label-width="120px">
          <el-form-item label="账户类型">
            <el-select v-model="account_form.account_type" placeholder="请选择账户类型" style="width: 100%;">
              <el-option v-for="(item,index) in account_type" :label="item.value" :value="item.id" :key="index" />
            </el-select>
          </el-form-item>
         
          <el-form-item label="账户属性">
            <el-select v-model="account_form.account_attribute" placeholder="请选择账户属性" style="width: 100%;">
              <el-option v-for="(item,index) in account_attribute" :label="item.value" :value="item.id" :key="index" />
            </el-select>
          </el-form-item>
          <el-form-item label="账户名称">
            <el-input v-model="account_form.account_name"></el-input>
          </el-form-item>
          <el-form-item label="银行名称">
            <el-input v-model="account_form.bank_name"></el-input>
          </el-form-item>
          <el-form-item label="支行名称">
            <el-input v-model="account_form.branch_name"></el-input>
          </el-form-item>
          <el-form-item label="银行账号">
            <el-input v-model="account_form.bank_number"></el-input>
          </el-form-item>
          <el-form-item label="许可证号">
            <el-input v-model="account_form.license_key"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmitAccount">提交</el-button>
          </el-form-item>
         
      </el-form>
      
    </el-drawer>
  </div>
</template>
<script>
  
  import {
    getBaseMerchantMain,getMerchantShareholder,saveMerchant,addMerchantContactor,MerchantContactorList,getMerchantInstallmentOrganization,
    createAccount,MerchantAccountList,onSubmitAttachment
  } from '@/api/merchant'
  import {
    getRegion
  } from '@/api/finance'
  export default {
    
    data() {
      return {
        att_form:{},
        dialogVisible:false,
        dialogImageUrl:'',
        upload_lab:'营业执照',
        att_detail:{
          field_desc:'营业执照'
        },
        action: process.env.VUE_APP_BASE_API + '/backend_upload',
        active_field:'business_license',
        myHeaders: {
          token: this.$store.getters.token
        },
        rateData:[
          {period:6, dc:0, rate:'7.1', month_rate:1.1833, merchant_rate:'/',server_rate:0,customer_IRR:'23.9479',all_IRR:'23.9479',status:true},
          {period:9, dc:0, rate:'10.2', month_rate:1.1333, merchant_rate:'/',server_rate:0,customer_IRR:'23.8537',all_IRR:'23.8537',status:true},
          {period:12, dc:0, rate:'13.4', month_rate:1.1167, merchant_rate:'/',server_rate:0,customer_IRR:'23.8775',all_IRR:'23.8775',status:true},
          {period:18, dc:0, rate:'20', month_rate:1.1111, merchant_rate:'/',server_rate:0,customer_IRR:'23.9271',all_IRR:'23.9271',status:true},
          {period:24, dc:0, rate:'26.8', month_rate:1.1167, merchant_rate:'/',server_rate:0,customer_IRR:'23.925',all_IRR:'23.925',status:true}
        ],
        account_type:[
          {id:1,value:'企业账户'},
          {id:2,value:'个人账户'},
          {id:3,value:'虚拟账户'},
        ],
        account_attribute:[
          {id:1,value:'本司账户'},
          {id:2,value:'集团账户'},
        ],
        account_form:{},
        accouontData:[],
        province:[],
        city:[],
        district:[],
        id:'',
        title:'基本信息',
        disabled_all:true,
        disabled_1:true,
        disabled_2:true,
        disabled_3:true,
        disabled_4:true,
        listLoading:true,
        activeName: '1',
        account:{
          drawer:'账户',
          drawerAble:false,
          direction:'rtl',
        },
        contactorList:{
          drawer:'人员列表',
          drawerAble:false,
          direction:'rtl',
        },
        contactor:{
          drawer:'添加人员',
          drawerAble:false,
          direction:'rtl',
        },
        contactor_list:[],
        drawer:{
          drawer:'股东设置',
          drawerAble:false,
          direction:'rtl',
          shareholder_from:{}
        },
        contactor_form:{},
        shareholder_from:{
          order_id: '',
          datas: [
            {
              name: '',
              proportion: '',
            }
          ]
        },
        installmento_rganization_list:[],
        info_1:{
          merchant_name:'',
          merchant_type:'企业'
        },
        info_2:{
          merchant_type:1
        },
        info_3:{
          dept:1,
          repurchase_method:1,
          repurchase_parameters:1,
          loan_method:1,
          automatic_repurchase:0,
          gear_position:1,
          loan_control:1,
          rate:2,
          fixed_price_min:1000,
          fixed_price_max:60000
        },
        info_4:{},
        info_5:{},
        fee_model:[
          {id:1,value:'线下-个人'},
          {id:2,value:'线下-商户'},
          {id:3,value:'线上-电子户'},
          {id:4,value:'线上-预缴'},
          {id:5,value:'线上-渠道个人'},
          {id:6,value:'易宝-动态账户'},
          {id:7,value:'易宝-固定账户'},
        ],
        merchant_institutions:[
          {id:1,value:'主板上市'},
          {id:2,value:'莆田上市'},
          {id:3,value:'其他上市'},
          {id:4,value:'全国连锁'},
          {id:5,value:'大型连锁'},
          {id:6,value:'中型连锁'},
          {id:7,value:'小型连锁'},
          {id:8,value:'本地知名'},
          {id:9,value:'本地机构'},
          {id:10,value:'分支机构'},
     
          {id:5,value:'其他'},
        ],
        merchant_class:[
          {id:1,value:'综合'},
          {id:2,value:'专科'},
          {id:3,value:'中医'},
          {id:4,value:'其他'},
        ],
        merchant_ownership:[
          {id:1,value:'公立直营'},
          {id:2,value:'公立承包'},
          {id:3,value:'民营直营'},
          {id:4,value:'民营加盟'},
          {id:5,value:'其他'},
        ],
        business_status:[
          {id:1,value:'在营'},
          {id:2,value:'注销'},
          {id:3,value:'吊销'},
        ],
        information_merchant_type:[
          {id:1,value:'整型'},
          {id:2,value:'口腔'},
          {id:3,value:'植发'},
        ],
        institution_type:[
          {id:1,value:'医院'},
          {id:2,value:'门诊'},
          {id:3,value:'诊所'},
          {id:4,value:'卫生所'},
          {id:5,value:'社区医院'},
          {id:6,value:'其他'},
        ],
        treatment_level:[
          {id:1,value:'一级'},
          {id:2,value:'二级'},
          {id:3,value:'三级'},
          {id:4,value:'四级'},
          {id:5,value:'未定级'},
          {id:6,value:'其他'},
        ],
        rules: {
          merchant_name: [
            { required: true, message: '请输入企业名称', trigger: 'blur' },
          ],
        }
      }
    },
    created() {
      this.listLoading=true;
      this.id = this.$route.params.id;
      this.getBaseMerchantDetail(1);
      this.MerchantContactorList();
      this.getRegionByPid(0);
      this.info_2.admin_merchant_id = this.id;
      this.info_3.admin_merchant_id = this.id;
      this.info_4.admin_merchant_id = this.id;
      this.account_form.admin_merchant_id = this.id;
    },
    methods: {
      //点击选择附件列表
      chooseAtt(index,item){
        this.active_field = index;
        this.att_detail = item;
      },
      onSubmitAttachment() {
        this.listLoading = true;
        onSubmitAttachment(this.info_5.form).then(resp => {
          this.$notify({
            title: '提示',
            message: 'success',
            type: 'success',
            duration: 2000,
            onClose: this.getBaseMerchantDetail(5)
          })
        })
      },
      handSuccess(res, file) {
        this.info_5.form[this.active_field].push(res.data.attach_id.id);
        this.info_5.attachment[this.active_field].list.push(res.data)
      },
      beforeAvatarUpload(file) {
        // console.log(file)
        let isJPG = file.type === 'image/png'
        const isLt2M = file.size / 1024 / 1024 < 200
        if ((file.type === 'image/png') || (file.type === 'image/jpeg') || (file.type === 'image/gif')) {
          isJPG = true
        } else {
          isJPG = false
          this.$message.error('上传头像图片只能是 png,jpg,或者jif格式')
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!')
        }
        //  console.log(isJPG && isLt2M)
        return isJPG && isLt2M
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleRemove(file, fileList) {
        this.info_5.form[this.active_field].splice(file["number"], 1);
      },
      //上传
      UploadUrl: function() {
        return this.action
      },
      //获取地区
      getRegionByPid(pid,lab){
        let pam = {parent_id:pid}
        getRegion(pam).then(response => {
         if(response.code==200){
            if(pid==0){
              this.province = response.data;
            }else if(lab==1){
              this.city = response.data;
            }else{
              this.district = response.data;
            }
            
         }else{
           this.$message.error('系统错误');
         }
       }) 
      },
      //人员列表
      managerContactor(){
        this.contactorList.drawerAble = true;  
      },
      //新增人员开启
      addContactor(row){
        this.contactor.drawerAble = true;  
        this.contactor_form = row;
      },
      //新增人员提交
      onSubmitContactor(){
        this.contactor_form.admin_merchant_id = this.id;
        addMerchantContactor(this.contactor_form).then(response => {
         
          if(response.code==200){
            this.$message.success('success');
            this.MerchantContactorList();
            this.contactor.drawerAble = false; 
            this.contactor_form = {}
          }else{
            this.$message.error('系统错误');
          }
          this.listLoading = false
        })
      },
      //联系人员列表
      MerchantContactorList(){
        let pam = {admin_merchant_id:this.id}
        MerchantContactorList(pam).then(response => {
         
          if(response.code==200){
            this.contactor_list = response.data;
          }else{
            this.$message.error('系统错误');
          }
          this.listLoading = false
        })
      },
      //新增节点
      addDocument() {
        const o = { shareholder: '', money: '', percentage: '' }
        this.shareholder_from.datas.push(o)
      },
      //删除节点
      delDocument(k) {
        this.shareholder_from.datas.map((item, index) => {
          if (index == k) {
            this.shareholder_from.datas.splice(index, 1)
          }
        })
      },
      //切换tab
      handleClick(tab, event) {
        this.disabled_all = true;
        if(this.activeName=='1'){
          this.title = '基本信息';
        }
        if(this.activeName=='2'){
          this.title = '经营信息';
          this.getBaseMerchantDetail(2);
          this.InstallmentOrganization();
        }
        if(this.activeName=='3'){
          this.title = '产品信息';
          this.getBaseMerchantDetail(3);
          this.MerchantAccountList();
        }
        if(this.activeName=='4'){
          this.title = '账户信息';
          this.MerchantAccountList();
        }
        if(this.activeName=='5'){
          this.getBaseMerchantDetail(5);
          this.title = '附件信息';
          //this.MerchantAccountList();
        }
      },
      // 开启编辑模式
      openEdit(lab){
        var field = 'disabled_'+lab;
        this[field] = false;
        this.disabled_all = false;
      },
      //打开新增账户窗口
      addAccountOpen(row){
        this.account.drawerAble = true; 
        this.account_form = row; 
        this.account_form.admin_merchant_id = this.id;
      },
      //新增账户
      onSubmitAccount(){
        createAccount(this.account_form).then(response => {
          if(response.code==200){
            //this.accouontData = response.data;
            this.account.drawerAble = false;
            this.MerchantAccountList();
          }else{
            this.$message.error('系统错误');
          }
          this.listLoading = false
        })
      },
      //账户列表
      MerchantAccountList(){
        let pam = {admin_merchant_id:this.id}
        MerchantAccountList(pam).then(response => {
         
          if(response.code==200){
            this.accouontData = response.data;
          }else{
            this.$message.error('系统错误');
          }
          this.listLoading = false
        })
      },
      // 保存
      save(lab){
        var field = 'disabled_'+lab;
        this[field] = true;
        this.disabled_all = true;
        var field = 'info_'+lab;
        this[field].lab = lab;

        this[field].shareholder = this.shareholder_from;
        saveMerchant(this[field]).then(response => {
         
          if(response.code==200){
            
          }else{
            this.$message.error('系统错误');
          }
          this.listLoading = false
        })
      },
      //获取详情,基本信息
      getBaseMerchantDetail(lab) {
        var pam = {id:this.id,lab:lab}
        getBaseMerchantMain(pam).then(response => {
          var field = 'info_'+lab;
          if(response.code==200){
            this[field] = response.data;
            if(lab==2){
              this.getRegionByPid(this.info_2.actual_province,1);
              this.getRegionByPid(this.info_2.actual_city,2);
            }
            if(lab==5){
              this.att_detail = response.data.attachment.business_license
            }
          }else{
            this.$message.error('系统错误');
          }
          this.listLoading = false
        })
      },
      
      //股东设置
      shareholderShow(){
        this.drawer.drawerAble = true;    
        this.shareholder_from.datas = [
          {
            name: '',
            proportion: '',
          }
        ]
        if (this.info_1.merchant_shareholder_count > 0) {
          this.shareholder_from.datas = this.info_1.merchant_shareholder
        }  
        console.log(this.shareholder_from)
      },
      //股东设置
      ShareHolderSet() {
        this.info_1.merchant_shareholder_count = this.shareholder_from.datas.length;
        this.info_1.merchant_shareholder = this.shareholder_from.datas;
        this.drawer.drawerAble = false;
      },
      //分期机构
      InstallmentOrganization(){
        let pam = {admin_merchant_id:this.id}
        getMerchantInstallmentOrganization(pam).then(response => {
         
          if(response.code==200){
            this.installmento_rganization_list = response.data;
          }else{
            this.$message.error('系统错误');
          }
          this.listLoading = false
        })
      },
    }
  }
</script>

<style>
  .title{font-size: 12px;padding: 10px;margin-left: 10px;}
  .demo-ruleForm{margin-top: 20px;}
  .bixxx{border: 1px solid #ddd;border-radius: 5px;}
  .footerbtn{position: fixed;bottom: 30px;right: 100px;}
  .infinite-list{width: 240px;}
  .infinite-list>li{border-bottom:1px solid #ddd;height: 40px;line-height: 38px;list-style-type:none;cursor: pointer;font-size: 12px;color: #666;padding: 0;margin: 0;}
  .bg-purple{text-align: left;}
  .bg-purple-light{text-align: right;}
  .activess{background-color: #66cccc;color:#fff!important}
</style>
